<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/angular.js"></script>
		
		<style>
			/*ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：*/
			input.ng-invalid {
				background-color: lightblue;
			}
		</style>
	</head>

	<body ng-app="myApp">
		<p>
			AngularJS 通过被称为 指令 的新属性来扩展 HTML。 <br /> AngularJS 通过内置的指令来为应用添加功能。 <br /> AngularJS 允许你自定义指令。<br />
		</p>

		<p>ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。</p>
		<div ng-init="names=['Jani','Hege','Kai']">
			<p>使用 ng-repeat 来循环数组</p>
			<ul>
				<li ng-repeat="x in names">
					{{ x }}
				</li>
			</ul>
		</div>

		<!--
        	作者：871490976@qq.com
        	时间：2018-09-17
        	描述：你可以使用 .directive 函数来添加自定义的指令。
			要调用自定义指令，HTML 元素上需要添加自定义指令名。
			使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
        -->
		<runoob-directive></runoob-directive>
		<div runoob-directive></div>
		<div class="runoob-directive"></div>
		<!-- directive: runoob-directive -->
		<br />
		<br /> 
		
		隐藏 HTML: <input type="checkbox" ng-model="myVar">
		<div ng-hide="myVar">
			<h1>Welcome</h1>
			<p>Welcome to my home.</p>
		</div>
		
		
		<p>ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):</p>
		<form name="myForm" ng-init="myText = 'test@runoob.com'">
			Email:
			<input type="email" name="myAddress" ng-model="myText" required>
			<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
			<p>编辑邮箱地址，查看状态的改变。</p>
			<h1>状态</h1>
			<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
			<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
			<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>
			
		</form>
		
		<form name="myForm2">
			输入你的名字:
			<input name="myAddress" ng-model="text" required>
		</form>
		
		
	</body>

	<script>
		var app = angular.module("myApp", []);
		app.directive("runoobDirective", function() {
			return {
				restrict: "A", // 通过添加 restrict 属性,并设置值为 "A", 来设置指令只能通过属性的方式来调用:
				template: "<h1>自定义指令!</h1>"
			};
		});
	</script>

</html>